<template>
  <NavBar></NavBar>
  <div id="main">  
    <h1>登录</h1><br>
    <div id="login">
      <br><br>
      <el-form :model="formData" label-width="20%">
        <el-form-item label="手机号码">
          <el-input v-model="formData.phoneNumber" style="width:95%" maxlength="20"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="formData.password" style="width:95%" maxlength="20" type="password"></el-input>
        </el-form-item>
      </el-form>
      <el-form  :model="formData" label-width="20%" :rules="rules" status-icon>
        <el-form-item label="验证码" prop="verificationCode" id="verify">
          <el-input v-model="formData.verificationCode" id="verificationInput" style="width: 40%;position:relative;bottom:25px;"></el-input>
          <img :src=imageURL alt="验证码" @click="changeVerificationCode" id="verificationCodeImg" title="点击图片可以更换验证码，不区分大小写。">
        </el-form-item>
        <el-form-item>
          <el-checkbox label="记住手机号" name="isRememberP" v-model="formData.isRememberPhoneNumber" style="position:relative;bottom:30px;"></el-checkbox>
          <el-checkbox label="记住密码" name="type" v-model="formData.isRememberPassword" v-show="formData.isRememberPhoneNumber" style="position:relative;bottom:30px;"></el-checkbox>
        </el-form-item>
        <div style="margin:auto">  
          <el-button type="primary" @click="tryLogin" style="margin-left: 30%;position:relative;bottom:35px;">登录</el-button>
          <el-button type="success" @click="goRegister" style="position:relative;bottom:35px;">前往注册</el-button>
        </div>
      </el-form>
    </div>
  </div>
  <br><br>
  <Footer></Footer>
</template>

<script>
import { ref,reactive } from '@vue/reactivity'
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
  name: "Login",
  components: {NavBar,Footer},
  methods: {
    goRegister(){
      this.$router.push('/register');
    },
  },
}
</script>

<script setup>
import * as md5 from '@/assets/js/md5.js'
import * as loginRequest from '@/network/login.js';
import { ref } from "@vue/reactivity";
import { ElMessage } from 'element-plus';
import { useRouter,useRoute } from 'vue-router';
var formData=ref();
var baseURL=ref("http://localhost:80/web-course-backend/router.php?t=verification/getVerification/");
var imageURL=ref();
var rightInput=[false,false];
var passwordRegx=/^[_a-zA-Z0-9]+$/;
var phoneNumberRegx=/^1[3456789]\d{9}$/;
formData.value={
  phoneNumber:"",
  password:"",
  verificationCode:"",
  isRememberPhoneNumber:false,
  isRememberpassword:false,
}
const message1=()=>{
  ElMessage.error('请按照提示正确填写信息');
}
const message2=()=>{
  ElMessage.error('验证码不能为空');
}
const message3=()=>{
  ElMessage.error('验证码错误');
}
const message4=()=>{
  ElMessage.error('手机号码或密码错误');
}
const message=(value)=>{
  ElMessage.error(value);
}

const router=useRouter();
function goHomePage(){
  router.push('/app/index');
  ElMessage({
    message:'登录成功',
    type:'success',
  })
}

function md5Encode(password){
  return md5.hex_md5(password);
}

const checkPassword=(value)=>{
  if(value==""){message('密码不能为空!'); return false;}
  else if(value.length>20||value.length<8) {message('密码的长度应为8~20!');return false;}
  else if(!passwordRegx.test(value)) {message('密码仅包含英文、数字和下划线!');return false;}
  else if(checkPasStrength(value)<2) {message('密码至少包含小写字母、大写字母、数字和下划线中的两种!');return false;}
  return true;
}
const checkPhoneNumber=(value)=>{
  if(value=="") {message('手机号码不可以为空');return false;}
  else if(!phoneNumberRegx.test(value)) {message('请输入正确的手机号码');return false;}
  return true;
}
readLocalStorage();
changeVerificationCode();

function readLocalStorage(){
  if(localStorage.getItem('isFromRegister')==1){
    formData.value.phoneNumber=localStorage.getItem('phoneNumber');
    formData.value.password=localStorage.getItem('password');
    localStorage.setItem('isFromRegister',0);
    localStorage.setItem('phoneNumber',"");
    localStorage.setItem('password',"");
  }
  else if(localStorage.getItem('isRememberPhoneNumber')==1){
    formData.value.phoneNumber=localStorage.getItem('phoneNumber');
    formData.value.isRememberPhoneNumber=true;
    if(localStorage.getItem('isRememberPassword')==1){
      formData.value.isRememberPassword=true;
      formData.value.password=localStorage.getItem('password');
    }
  }
}
function changeVerificationCode(){
  imageURL.value=baseURL.value+Math.random();
}
function checkPasStrength(){
  var strength=0;
  var pas=formData.value.password;
  if(/[_]/.test(pas)) strength++;
  if(/[0-9]/.test(pas)) strength++;
  if(/[a-z]/.test(pas)) strength++;
  if(/[A-Z]/.test(pas)) strength++;
  return strength;
}
function tryLogin(){
  if(checkPhoneNumber(formData.value.phoneNumber)==false) return;
  if(checkPassword(formData.value.password)==false) return;
  if(formData.value.verificationCode==""){
    message2();
    return;
  }
  var loginData={};
  loginData.phoneNumber=formData.value.phoneNumber;
  loginData.password=md5.hex_md5(formData.value.password);
  loginData.verificationCode=formData.value.verificationCode;
  loginRequest.tryLogin(loginData).then((res) => {
    if(res.state==200){
      if(formData.value.isRememberPhoneNumber){
        localStorage.setItem('isRememberPhoneNumber',1);
        localStorage.setItem('phoneNumber',formData.value.phoneNumber);
        if(formData.value.isRememberPassword){
          localStorage.setItem('isRememberPassword',1);
          localStorage.setItem('password',formData.value.password);
        }
        else{
          localStorage.setItem('isRememberPassword',0);
          localStorage.setItem('password','');
        }
      }
      else{
        localStorage.setItem('isRememberPhoneNumber',0);
        localStorage.setItem('phoneNumber','');
        localStorage.setItem('isRememberPassword',0);
        localStorage.setItem('password','');
      }
      goHomePage();
    }
    else{
      message(res.msg);
      changeVerificationCode();
      formData.value.verificationCode="";
    }
  });
}

function logout(){
  loginRequest.logout().then(res=>{
    message(res.msg);
  });
}

</script>
<style scoped lang="scss">
  // #main{
  //   background-image: url('http://localhost/web-course-frontend/src/assets/background.png');
  // }
  #login{
    margin: auto;
    width: 450px;
    border-radius: 5px;
    background:#f4f5f7;
    border:#eeeeee 1px solid;
  }
  #verificationCodeImg{
    width: 50%;
    height: 50px;
    border: #eeeeee 1px solid;
    border-radius: 5px;
    margin-left: 5%;
  }
  #verificationInput{
    width: 40%;
    position:relative;
    bottom:25px;
  }
  h1{
    margin: auto;
    text-align: center;
  }
</style>
